<template>
  <div v-for="item in list" :key="item.id">
    <div :class="{ 'border-line': !isRetract }">
      <div class="comment text-color" :class="{ pl20: isRetract }">
        <div class="head-img text-overflow text-xs" @click="goBlog(item)">
          {{ item.user_name.slice(0, 3) }}
        </div>
        <div class="textarea-box">
          <span class="f1 df jc-sb text-sm cursor" @click="goBlog(item)">
            {{ item.user_name }}
          </span>
          <div class="answer-info text-base mt5 mb5">
            <span v-if="item.answer" class="answer-name">
              回复
              <span>@{{ item.answer }}</span>
            </span>
            {{ item.content }}
          </div>
          <div class="comment-info text-sm">
            {{ dayjs(item.create_time).format('YYYY-MM-DD HH:mm:ss') }}
            <span class="ml5">IP:{{ handleCity(item) }}</span>
            <span class="answer" @click="showCommentEditor(item)">回复</span>
          </div>
          <div v-if="item.show">
            <commentEditor
              :answerAuthor="item.user_name"
              @close="item.show = false"
              @submit="submit"></commentEditor>
          </div>
        </div>
      </div>
      <comment-list
        :list="item.children"
        :isRetract="true"
        :isLeaveMessage="isLeaveMessage"></comment-list>
      <div
        v-if="item.children && item.children.length < item.childCount"
        class="comment-child-more"
        @click="clickChildMore(item)">
        共{{ item.childCount }}条回复，
        <span>点击查看更多</span>
      </div>
    </div>
  </div>
  <div v-if="count && list.length && list.length < count" class="comment-more" @click="clickMore">
    共{{ count }}条评论，
    <span>点击查看更多</span>
  </div>
</template>

<script lang="ts" setup>
  import commentEditor from '@/components/comment/comment-editor.vue';
  import { addComment } from '@/apis/article';
  import { addLeaveMessage } from '@/apis/leavemessage';
  import { dayjs } from 'element-plus';
  import type { IComment } from '@/apis/type';
  import { handleCity } from '@/utils/utils';
  const props = defineProps(['list', 'count', 'isRetract', 'isLeaveMessage']);
  const emits = defineEmits(['clickMore', 'clickChildMore']);

  const clickChildMore = (item: IComment) => {
    emits('clickChildMore', item);
  };
  const clickMore = () => {
    emits('clickMore');
  };
  const listParams = {} as IComment;
  const showCommentEditor = (item: IComment) => {
    item.show = !item.show;
    listParams.blog_id = item.blog_id;
    listParams.pid = item.pid ? item.pid : item.id;
  };
  // 提交评论
  const submit = async (params: IComment) => {
    const obj = {
      ...params,
      ...listParams
    };
    let res;
    if (props.isLeaveMessage) res = await addLeaveMessage(obj);
    else res = await addComment(obj);
    if (res.code == 200) {
      ElMessage.success(res.msg);
      props.list.find((item: IComment, index: number, arr: Array<IComment>) => {
        if (item.id == obj.pid) {
          item.children ? item.children.push(obj) : (item.children = [obj]);
          ++item.childCount;
        } else if (item.pid == obj.pid) {
          arr.push(obj);
        }
        return item.id == listParams.pid || item.pid == obj.pid;
      });
    }
  };
  const goBlog = (item: IComment) => {
    // location.href = 'https://www.baidu.com/';
    if (item.url) {
      let url = item.url;
      if (!url.match(/^https?:\/\//i)) {
        url = 'http://' + url;
      }
      window.open(url);
    }
  };
</script>

<style lang="scss" scoped>
  .border-line {
    padding-bottom: 20px;
    border-bottom: 1px dotted var(--bg-color-reverse);
  }
  .pl20 {
    padding-left: 20px;
  }
  .comment {
    display: flex;
    margin-top: 10px;
    .head-img {
      width: 40px;
      height: 40px;
      border-radius: 100%;
      background: linear-gradient(
        300deg,
        #ffffff 1%,
        #ead2ea 10.2%,
        #e4d5ee 19.6%,
        #d1def3 36.8%,
        #b5dee5 62.2%,
        #cfebf3 88.9%,
        #ffffff 99%
      );
      display: flex;
      justify-content: center;
      align-items: center;
      cursor: pointer;
      transition: all 1s ease-in-out;
      transform-origin: 50% 50%;
      margin-right: 10px;
      justify-content: center;
      color: #000;
    }
    .head-img:hover {
      transform: rotate(360deg);
    }
    .textarea-box {
      margin-top: 5px;
      flex: 1;
      .comment-info {
        color: var(--text-color-sub);
        .answer {
          cursor: pointer;
          margin-left: 15px;
        }
      }

      .answer-name {
        cursor: pointer;
        margin-left: 15px;
        span {
          font-size: 14px;
          color: var(--text-color-link);
          margin-right: 10px;
        }
      }
    }
  }
  .comment.child {
    padding-left: 50px;
  }
  .comment-more,
  .comment-child-more {
    font-size: 13px;
    color: var(--text-color-sub);
    text-align: center;
    cursor: pointer;
    margin-top: 10px;
    span:hover {
      color: var(--text-color-hover);
    }
  }
  .comment-child-more {
    padding-left: 70px;
    text-align: left;
  }
</style>
